<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/abnormal' }">新增黑名单</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="abnormal-page">
      <div class="search_btn">
        <span class="text">搜索条件</span>
        <el-button round  :color="tab == 1 ? '#0071bb' : ''"  @click="onAdd(1)">根据手机号搜索</el-button>
        <el-button round  :color="tab == 2 ? '#0071bb' : ''"   @click="onAdd(2)">根据异常订单数搜索</el-button>
      </div>
        <!-- 搜索条件 -->
        <el-form style="width:100%;display:flex;">
          <el-form-item label="下单日期" required>
            <el-date-picker  type="datetime" placeholder="请选择下单日期" style="width: 180px;" :suffix-icon="CaretBottom" />
          </el-form-item>
          <el-form-item label="手机号" style="margin-left: 10px;" required>
            <el-date-picker  type="datetime" placeholder="请输入客户手机号码" style="width: 180px;" :suffix-icon="CaretBottom" />
          </el-form-item>
          <el-form-item style="margin-left:20px">
            <el-button round :icon="Search" color="#0071bb">查询</el-button>
			 <el-button round :icon="RefreshLeft">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 表格数据 -->
		<div class="tables">
		    <el-table :data="tableData" style="">
		    	<el-table-column type="selection" v-model="whole" />
		    	<el-table-column prop="id" label="订单" width="80px" />
		    	<el-table-column prop="tel" label="客户手机号" />
		    	<el-table-column prop="time" label="订单总数" />
		    	<el-table-column prop="reason" label="订单数" />
              	<el-table-column prop="" label="操作">
			    	<template #default="scope">
                  		<el-button  color="#0071bb" @click="onShow()">查看</el-button>
                	</template>
              	</el-table-column>
			</el-table>
		 </div>
        <div class="footer">
          <el-button round  color="#0071bb" @click="joinBlackList()">加入黑名单</el-button>
          <el-button round>取消</el-button>
        </div>
		</div>
    	<!-- 详情 -->
    	<Detail v-if="show" @close="onClose()" @submit="onSubmit()"></Detail>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { CaretBottom, Refresh, HelpFilled, Search, RefreshLeft, Plus} from '@element-plus/icons-vue'
import Detail from './components/detail.vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const whole = ref(false)
const tableData = [
	{
		id: '1',
		time: '2024-05-15',
		reason: '未及时付款',
    	tel:'13306236880'
	},
    {
		id: '2',
		time: '2024-05-15',
		reason: '未及时付款',
    	tel:'13306236880'
	},
    {
		id: '3',
		time: '2024-05-15',
		reason: '未及时付款',
      	tel:'13306236880'
	},
	]
  // 分页
const pager = ref<any>({
	currentPage:1,
	pageSize:10,
	total:10,
})
// 改变pageSize
const handleSizeChange = (val : number) => {
	console.log(`${val} items per page`)
}
// 改变当前页码 currentPage
const handleCurrentChange = (val : number) => {
	console.log(`current page: ${val}`)
}
const show = ref<string>(false)
// 打开弹窗
const onShow = () => {
  show.value = true
}
// 提交
const onSubmit = () => {
	show.value = false
}
// 关闭
const onClose = () => {
	show.value = false
}
const tab = ref(1)
const onAdd = (value:number) => {
  tab.value = value
}
const joinBlackList = () => {
	router.push('/blacklist');
}
</script>

<style lang="scss" scoped>
	.abnormal-page {
		background-color: #fff;
		margin-top: 10px;
		padding: 10px;

		.title {
			font-size: 16px;
		}
    .search_btn{
      margin-bottom:10px;
      .text{
        margin-right:10px;
		color: #4D4D4D;
      }
    }
    .add{
      margin-bottom:10px;
    }
    .footer{
      margin-top:20px;
      width:100%;
      text-align:center;
    }

		.btn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 20px;
		}
		.tables {
			margin-top: 20px;
			.check-text {
				color: #0071bb;
				cursor: pointer;
			}
			.handle {
				color: #2686c5;
			}
			.abnormal {
				color: #ff4141;
			}
		}
	}
</style>
<style>
.el-form-item__label:before{
	color: #4D4D4D !important;
}
</style>